<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>试卷题目管理</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <link rel="stylesheet" href="../css/all.css">
    <style>
        .hr5 {
            margin: 3px 0;
        }
        .tools {
            position: sticky;
            top: 5px;
        }
        .app-content {
            display: flex;
            justify-content: space-around;

        }
        .left-div {
            padding: 5px;
            flex: 1;
        }
        .list-ul {
            list-style: none;
            padding-left: 0;
        }
        .list-ul .item {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 5px 2px;
            margin: 5px 0;
        }
        .circle-sel {
            display: inline-block;
            min-width: 22px;
            border-radius: 22px;
            background-color: #5cb85c;
            padding: 2px 10px;
            vertical-align: middle;
        }
        .qt-desc {
            margin-top: 5px;
        }
        .selected {
            background-color: #5cb85c;
        }
        .right-div {
            padding: 5px;
            flex: 1;
        }
        .btn-right {
            float: right;
        }

    </style>
</head>
<body>

<div id="app" v-cloak>
    <div class="app-content" >
        <div class="left-div">
            <div class="title3">
                <span>本试卷题目</span>
                <span class="tip1" >(总分值: {{totalScore/10}}分)</span>
            </div>
            <div class="tools" >
                <button type="button" class="btn btn-warning" @click=" doRemoveQtFromExam " >移除</button>
                <span class="tip1" >(选中操作)</span>
            </div>
            <hr class="hr5">
            <ul class="list-ul" >

                <li class="item" v-for=" (qt,index) in questions " >
                    <label class="form-checkbox">
                        <input type="checkbox" name="examQt" class="checkbox" :value=" qt.id " v-model="examSelectedArr" >
                        <div class="checkbox-item">
                            编号{{qt.id}} ({{qt.type}}-{{qt.language}}, {{qt.score/10}}分)
                        </div>
                    </label>
                    <div class="qt-desc">{{qt.description}}</div>
                </li>

                <li v-if=" questions.length == 0 " class="item" >该试卷还没有添加题目</li>

            </ul>
        </div>
        <div class="right-div">
            <div>
                <div class="title3">题目库</div>
            </div>
            <div class="tools" >
                <button type="button" class="btn btn-danger" @click=" doRemoveQuestion " >删除</button>
                <button type="button" class="btn btn-success" @click=" doAddQtToExam ">加入</button>
                <button type="button" class="btn btn-warning" @click=" doShowQuestionModify ">修改</button>
                <button type="button" class="btn btn-primary" @click=" doShowQuestionAdd ">添加新题</button>
                <span class="tip1" >(选中操作)</span>
                <span class="circle-sel" >已加入</span>
                <div class="clear-float" >
                    <div class="btn-right">
                        <select v-model="searchParam.language">
                            <option value="-1">全部</option>
                            <option :value="language.name" v-for="(language, index) in languageObjs" >{{language.name}}</option>
                        </select>

                        <select v-model="searchParam.typeId">
                            <option value="-1">全部</option>
                            <option :value="key" v-for="(val, key) in typeObjs" >{{val}}</option>
                        </select>

                        <div style="display: inline-block" >
                            <div class="page-list" >
                                <a @click="doGoPage(-1)" class="page-item" v-if="pageInfo.pageNum > 1" >
                                    <span>&lt;&lt;</span>
                                </a>

                                <a :class=" 'page-item' + (num == pageInfo.pageNum ? ' item-active' : '') " @click="doGoPage(num - pageInfo.pageNum)" v-for=" (num) in pageInfo.navigatepageNums " >
                                    <span>{{num}}</span>
                                </a>

                                <a @click="doGoPage(1)" class="page-item" v-if="pageInfo.pageNum < pageInfo.pages" >
                                    <span>&gt;&gt;</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="hr5">
            <ul class="list-ul" >
                <li :class=" 'item' + (qt.selected ? ' selected':'') " v-for=" (qt,index) in pageInfo.list " >
                    <label class="form-checkbox">
                        <input type="checkbox" v-if="!qt.selected" name="qt" class="checkbox" :value=" qt.id " v-model="qtSelectedArr" >
                        <div class="checkbox-item">
                            编号{{qt.id}} ({{qt.type}}-{{qt.language}}, {{qt.score/10}}分)
                        </div>
                    </label>
                    <div class="qt-desc">{{qt.description}}</div>
                </li>
                <li v-if=" pageInfo.pages == 0 " class="item" >未查到相关题目</li>
            </ul>
        </div>
    </div>

    <div v-if="isShowQuestionDialog" class="dialog-box" @click.self=" isShowQuestionDialog = false ">
        <div class="dialog-content" >
            <div class="dialog-close" @click=" isShowQuestionDialog = false " >
                <svg t="1666015662867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="876" width="30" height="30">
                    <path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" p-id="877"></path>
                    <path d="M927.846568 511.997953c0-229.315756-186.567139-415.839917-415.838893-415.839917-229.329059 0-415.85322 186.524161-415.85322 415.839917 0 229.300406 186.524161 415.84094 415.85322 415.84094C741.278405 927.838893 927.846568 741.29836 927.846568 511.997953M512.007675 868.171955c-196.375529 0-356.172979-159.827125-356.172979-356.174002 0-196.374506 159.797449-356.157629 356.172979-356.157629 196.34483 0 356.144326 159.783123 356.144326 356.157629C868.152001 708.34483 708.352505 868.171955 512.007675 868.171955" p-id="878"></path>
                    <path d="M682.378947 642.227993 553.797453 513.264806 682.261267 386.229528c11.661597-11.514241 11.749602-30.332842 0.234337-41.995463-11.514241-11.676947-30.362518-11.765975-42.026162-0.222057L511.888971 471.195665 385.223107 344.130711c-11.602246-11.603269-30.393217-11.661597-42.025139-0.059352-11.603269 11.618619-11.603269 30.407544-0.059352 42.011836l126.518508 126.887922L342.137823 639.104863c-11.662621 11.543917-11.780301 30.305213-0.23536 41.96988 5.830799 5.89015 13.429871 8.833179 21.086248 8.833179 7.53972 0 15.136745-2.8847 20.910239-8.569166l127.695311-126.311801L640.293433 684.195827c5.802146 5.8001 13.428847 8.717546 21.056572 8.717546 7.599072 0 15.165398-2.917446 20.968567-8.659217C693.922864 672.681586 693.950494 653.889591 682.378947 642.227993" p-id="879"></path>
                </svg>
            </div>
            <div class="dialog-head" >
                {{dialogTitle}}
            </div>
            <div class="dialog-body" >
                <form class="center-form95">
                    <div class="form-item">
                        <label class="form-label">类型:</label>
                        <select class="form-input" v-model="qt.typeId">
                            <option :value="key" v-for="(val, key) in typeObjs" >{{val}}</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label class="form-label">语言类型:</label>
                        <select class="form-input" v-model="qt.language">
                            <option :value="language.name" v-for="(language, index) in languageObjs" >{{language.name}}</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label class="form-label">分值:</label>
                        <input class="form-input" type="number" step="0.5" min="0" v-model="qt.score" @input=" qt.score*=1 " >
                    </div>

                    <div class="form-item">
                        <label class="form-label">题目描述:</label>
                        <textarea class="form-textarea" v-model="qt.description" ></textarea>
                    </div>

                    <div v-if="qt.typeId == 1" >
                        <div class="tip1">如果选项是正确的, 请在其后勾选</div>
                        <div class="form-item" v-for="opt in qt.optionList">
                            <label class="form-label">选项{{opt.key}}:</label>
                            <input class="form-input" type="text" v-model="opt.value" >
                            <input type="checkbox" class="old-checkbox" v-model="opt.right">
                        </div>
                    </div>
                    <div v-else class="form-item">
                        <label class="form-label">参考答案:</label>
                        <textarea class="form-textarea" v-model="qt.answer"></textarea>
                    </div>

                    <div class="form-item text-center">
                        <button type="button" class="btn" @click=" isShowQuestionDialog=false; " >关&nbsp;闭</button>
                        <button type="button" class="btn btn-primary" @click=" doQuestion " >确&nbsp;定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            search: '',
            questions: [], // 本试卷的题目
            totalScore: 0,// 本试卷所有题目的总分值
            qtObj: {}, // 本试卷的题目的 id
            // 查询题目的条件
            searchParam: {
                typeId: -1,
                language: '-1'
            },
            // 所有题目
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                pages: 0,
                list: [],
                navigatepageNums: []
            },
            examSelectedArr: [], // 试卷中选中的
            qtSelectedArr: [], // 所有题目中选中的

            isShowQuestionDialog: false,
            dialogTitle: '题目添加',

            typeObjs: {
                "1": "选择题",
                "2": "简答题",
                "3": "编程题"
            },
            languageObjs: [
                {id: 1, name: "JavaSE"},
                {id: 2, name: "JavaEE"},
                {id: 3, name: "HTML"},
                {id: 4, name: "CSS"},
                {id: 5, name: "JavaScript"},
                {id: 6, name: "Spring"},
                {id: 7, name: "SpringMVC"},
                {id: 8, name: "SpringCloud"}
            ],
            qt: {
                // description: '',
                // typeId: 1,
                // type: '选择题',
                // optionList: [
                //     {key:"A", value:"", right: false},
                //     {key:"B", value:"", right: false},
                //     {key:"C", value:"", right: false},
                //     {key:"D", value:"", right: false}
                // ],
                // answer: '',
                // score: 0,
                // language: 'JavaSE'
            },
            tempQt: {
                description: '',
                typeId: 1,
                type: '选择题',
                optionList: [
                    {key:"A", value:"", right: false},
                    {key:"B", value:"", right: false},
                    {key:"C", value:"", right: false},
                    {key:"D", value:"", right: false}
                ],
                answer: '',
                score: 0,
                language: 'JavaSE'
            }
        },
        beforeMount() {
            let search = location.search;
            if(search.startsWith("?")) {
                search = search.substr(1);// 获取请求参数

                // // 取指定参数
                // let pos = search.indexOf("examPaperId=");
                // let pos2 = search.indexOf("&", pos);
                // let str = search.substring(pos, (pos2 < 0 ? undefined : pos2));
                // let arr = str.split("=");
                // this.stuName = decodeURI(arr[1]);// 获取请求参数值
            }
            this.search = search;
            this.qt = JSON.parse(JSON.stringify(this.tempQt));

            this.doLoadExamPaperDetails();
            this.doGoPage(0);
        },
        watch: {
            "searchParam.typeId": function () {
                this.pageInfo.pageNum = 1;
                this.doGoPage(0);
            },
            "searchParam.language": function () {
                this.pageInfo.pageNum = 1;
                this.doGoPage(0);
            }
        },
        methods: {
            doGoPage(type) {
                // 加载题目库中题目
                let pageInfo = this.pageInfo;
                let pageNum = pageInfo.pageNum + type;
                if(pageNum < 1) {
                    pageNum = 1;
                    toastr.info('已是第一页了');
                }
                if(pageNum > pageInfo.pages) {
                    pageNum = pageInfo.pages;
                    if(pageInfo.pages !== 0) toastr.info('已是最后一页了');
                }
                // search 试卷id
                let param = this.search + "&pageNum="+pageNum+"&pageSize="+pageInfo.pageSize;
                if(this.searchParam.typeId > 0){
                    param+="&typeId="+this.searchParam.typeId;
                }
                if(this.searchParam.language != '-1'){
                    param+="&language="+this.searchParam.language;
                }
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/findQuestionsByPage",
                    data: param,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            // 清除被选中的
                            this.qtSelectedArr = [];
                            this.pageInfo = data;

                            // 标记 已添加的题目
                            let qtArr = this.pageInfo.list;

                            for(let index in qtArr) {
                                let qt = qtArr[index];
                                qt.selected = this.qtObj[qt.id] ? true : false;
                            }

                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doLoadExamPaperDetails() {
                // 加载试卷中题目
                let param = this.search;// 试卷id
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/findExamQt",
                    data: param,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            this.questions = data;
                            this.qtObj = {};
                            for(let index in this.questions) {
                                let qt = this.questions[index];
                                this.qtObj[qt.id] = true;
                                this.totalScore += qt.score;
                            }
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doAddQtToExam() {
                // TODO: 把选中的题目加入试卷
                if(this.qtSelectedArr.length < 1) {
                    toastr.warning('请选择题目');
                    return;
                }
                let param = this.search;// examPaperId
                param += "&questionIds=" + this.qtSelectedArr.join(",");
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/addQtToExam",
                    data: param,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            toastr.success(msg);
                            this.qtSelectedArr = [];
                            this.doLoadExamPaperDetails();
                            setTimeout(() => {
                                this.doGoPage(0);
                            }, 500);
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doRemoveQtFromExam() {
                // 把选中的题目从试卷中移除
                if(this.examSelectedArr.length < 1) {
                    toastr.warning('请选择题目');
                    return;
                }
                let param = this.search;// examPaperId
                param += "&questionIds=" + this.examSelectedArr.join(",");
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/removeQtFromExam",
                    data: param,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            toastr.success(msg);
                            this.examSelectedArr = [];
                            this.doLoadExamPaperDetails();
                            setTimeout(() => {
                                this.doGoPage(0);
                            }, 500);
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doRemoveQuestion() {
                if(this.qtSelectedArr.length < 1) {
                    toastr.warning('请选择题目');
                    return;
                }
                // 从题目库中删除选中的题目
                let param = this.search;// examPaperId
                param += "&questionIds=" + this.qtSelectedArr.join(",");
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/qt/removeById",
                    data: param,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            this.qtSelectedArr = [];
                            this.doGoPage(0);
                            toastr.success(msg);
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doShowQuestionAdd(){
                this.qt = JSON.parse(JSON.stringify(this.tempQt));
                this.dialogTitle = "题目添加";
                this.isShowQuestionDialog = true;
            },
            doQuestion(){
                if(this.dialogTitle == "题目修改") {
                    this.doModifyQuestion();
                    return;
                }
                this.doAddNewQuestion();
            },
            doAddNewQuestion() {
                // 添加新的题目到题目库
                // 实际 保存的 分值 score 需要 *10
                let qt = JSON.parse(JSON.stringify(this.qt));
                // 处理题目对象
                qt.score = qt.score*10;
                qt.type = this.typeObjs[qt.typeId];
                if(qt.typeId == 1) {
                    let ql = qt.optionList;
                    let answers = [];
                    for(let index in ql) {
                        if(ql[index].right){
                            answers.push(ql[index].key);
                        }
                        ql[index].right = false;
                    }
                    qt.answer = answers.length > 0 ? answers.join(",") : '';
                    qt.optionList = JSON.stringify(qt.optionList);
                } else {
                    delete qt.optionList;
                }
                let content = JSON.stringify(qt);
                //console.log(qt);

                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/qt/addQt",
                    data: {content: content},
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            this.isShowQuestionDialog = false;
                            toastr.success(msg);
                            this.doGoPage(0);
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doShowQuestionModify() {
                // 显示指定的题目详情, 以便修改
                if(this.qtSelectedArr.length < 1) {
                    toastr.warning('请选择一个题目');
                    return;
                }
                if(this.qtSelectedArr.length > 1) {
                    toastr.warning('只能选择一个题目');
                    return;
                }
                let qtId = this.qtSelectedArr[0];
                let qtArr = this.pageInfo.list;
                let qt;
                for (let i = 0; i < qtArr.length; i++) {
                    if(qtArr[i].id == qtId){
                        qt = qtArr[i];
                        break;
                    }
                }
                if(!qt) {
                    toastr.warning('题目不在当前页面');
                    return;
                }
                // 展示 题目
                this.qt = JSON.parse(JSON.stringify(qt));
                // 实际 展示的 分值 score 需要 /10
                this.qt.score /= 10;
                if(this.qt.optionList) {
                    this.qt.optionList = JSON.parse(this.qt.optionList);
                    for(let key in this.qt.optionList){
                        let opt = this.qt.optionList[key];
                        opt.right = this.qt.answer.indexOf(opt.key) != -1;
                    }
                }
                this.dialogTitle = "题目修改";
                this.isShowQuestionDialog = true;
            },
            doModifyQuestion() {
                // 实际 保存的 分值 score 需要 *10
                let qt = JSON.parse(JSON.stringify(this.qt));
                // 处理题目对象
                qt.score = qt.score*10;
                qt.type = this.typeObjs[qt.typeId];
                if(qt.typeId == 1) {
                    let ql = qt.optionList;
                    let answers = [];
                    for(let index in ql) {
                        if(ql[index].right){
                            answers.push(ql[index].key);
                        }
                        ql[index].right = false;
                    }
                    qt.answer = answers.length > 0 ? answers.join(",") : '';
                    qt.optionList = JSON.stringify(qt.optionList);
                } else {
                    delete qt.optionList;
                }
                qt.createDate = null;
                let content = JSON.stringify(qt);
                //console.log(qt);

                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/qt/modifyQt",
                    data: {content: content},
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            this.isShowQuestionDialog = false;
                            toastr.success(msg);
                            this.doGoPage(0);
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            }
        }
    });
</script>
</body>
</html>